<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header,
        .footer {
            width: 1200px;
            margin: 0 auto;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            height: 120px;
            color: #fff;
        }

        .footer {
            height: 300px;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            justify-content: space-between;
            padding-top: 10px;
        }

        li {
            width: 290px;
            border: 1px solid #333;
            margin-bottom: 10px;
            padding: 5px;
            box-sizing: border-box;
        }

        li>img {
            width: 278px;
            height: 300px;
            display: block;
        }

        .pagination {
            width: 1200px;
            margin: 10px auto;
            height: 50px;
            display: flex;
            align-items: center;
        }

        .pagination>.prev,
        .pagination>.next {
            width: 50px;
            height: 30px;
            cursor: pointer;
            background-color: orange;
            font-size: 24px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pagination>.disable {
            cursor: not-allowed;
            background-color: #ccc;
        }

        .pagination>.total {
            font-size: 30px;
            font-weight: 700;
            margin: 0 20px;
        }

        .pagination>select {
            font-size: 22px;
            padding-left: 20px;
            margin-left: 30px;
        }
    </style>
</head>

<body>

    <div class="header">网页头部</div>
    <div class="pagination">
        <span class="prev disable">&lt;</span>
        <span class="total">1 / 100</span>
        <span class="next disable">&gt;</span>
        <select>
            <option value="4">4</option>
            <option value="8">8</option>
            <option value="12">12</option>
            <option value="16">16</option>
        </select>
    </div>
    <ul>
      
    </ul>
    <div class="footer">网页底部</div>
    <script src="./data.js"></script>
    <script>
        // console.log(list);
        // 循环遍历 每个元素是个对象
        // 对象取值 根据键拿到对应的值 
        // 数组.reduce(function(prev,item){},init)
        // list是总数据  
        // 第几页  用户决定   

        // 每页显示多少条  默认程序员决定   用户也可以改 

        // 第几页   第几页数据的范围       每页显示几条
        //  1          0~11                  12
        //  2          12~23                  12
        //  3          24~35                 12
        //  4          36~47                  12
        //  5          48~59                  12
        //  6          60~71                  12

        //        (current-1) * pagesize ~   current * pagesize -1
        var current = 3; // 第几页 当前的页数
        var pagesize = 8; // 每页显示的条数

    //     var data = list.reduce(function(prev,item){
    //         return prev+ `
    //         <li>
    //     <img src="${item.pic}" alt="" width="278" height="278">
    //     <p>${item.name}</p>
    //     <p>价格:${item.price}</p>
    //     <p>城市:${item.city}</p>
    //     <p>地址:${item.address}</p>
    //     <p>时间:${item.showTime}</p>
    //   </li>
            
    //         `
    //     },'');
        // 从总数据中截取第几页的数据 然后再渲染 
        var pagedata = list.slice((current-1) * pagesize,current * pagesize);
            var data = pagedata.reduce(function(prev,item){
            return prev+ `
            <li>
        <img src="${item.pic}" alt="" width="278" height="278">
        <p>${item.name}</p>
        <p>价格:${item.price}</p>
        <p>城市:${item.city}</p>
        <p>地址:${item.address}</p>
        <p>时间:${item.showTime}</p>
      </li>
            
            `
        },'');

        document.querySelector('ul').innerHTML = data;
        /* 
        分析:
                1. 打开页面的时候
                  1. 从数组内截取部分数据渲染页面(slice 方法)
                  2. 调整总页数相关信息
                    => 根据 当前第几页 填写斜线左边的内容
                    => 根据 总条数和一页多少条 填写斜线右边的内容
                  3. 调整 上一页按钮 的类名
                    => 如果是第一页, 就有 disable 类名和 prev 类名
                    => 如果不是第一页, 只有 prev 类名
                  4. 调整 下一页按钮 的类名
                    => 如果是最后一页, 就有 disable 类名和 next 类名
                    => 如果不是最后一页, 只有 next 类名
                  5. 调整 下拉框 内容
                    => 根据当前一页显示多少条来决定这个操作
                2. 点击下一页按钮
                  0. 把当前页 ++
                  1. 从数组内截取部分数据渲染页面(slice 方法)
                  2. 调整总页数相关信息
                    => 根据 当前第几页 填写斜线左边的内容
                    => 根据 总条数和一页多少条 填写斜线右边的内容
                  3. 调整 上一页按钮 的类名
                    => 如果是第一页, 就有 disable 类名和 prev 类名
                    => 如果不是第一页, 只有 prev 类名
                  4. 调整 下一页按钮 的类名
                    => 如果是最后一页, 就有 disable 类名和 next 类名
                    => 如果不是最后一页, 只有 next 类名
                  5. 调整 下拉框 内容
                    => 根据当前一页显示多少条来决定这个操作
                3. 点击上一页按钮
                  0. 把当前页 --
                  1. 从数组内截取部分数据渲染页面(slice 方法)
                  2. 调整总页数相关信息
                    => 根据 当前第几页 填写斜线左边的内容
                    => 根据 总条数和一页多少条 填写斜线右边的内容
                  3. 调整 上一页按钮 的类名
                    => 如果是第一页, 就有 disable 类名和 prev 类名
                    => 如果不是第一页, 只有 prev 类名
                  4. 调整 下一页按钮 的类名
                    => 如果是最后一页, 就有 disable 类名和 next 类名
                    => 如果不是最后一页, 只有 next 类名
                  5. 调整 下拉框 内容
                    => 根据当前一页显示多少条来决定这个操作
                4. 切换下拉框内容的时候
                  0. 修改一页显示多少条
                  1. 从数组内截取部分数据渲染页面(slice 方法)
                  2. 调整总页数相关信息
                    => 根据 当前第几页 填写斜线左边的内容
                    => 根据 总条数和一页多少条 填写斜线右边的内容
                  3. 调整 上一页按钮 的类名
                    => 如果是第一页, 就有 disable 类名和 prev 类名
                    => 如果不是第一页, 只有 prev 类名
                  4. 调整 下一页按钮 的类名
                    => 如果是最后一页, 就有 disable 类名和 next 类名
                    => 如果不是最后一页, 只有 next 类名
                  5. 调整 下拉框 内容
                    => 根据当前一页显示多少条来决定这个操作
        
        */
    </script>
</body>

</html>